<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件化3</title>
</head>
<body>
<div id="app">
    <first-table></first-table>
    <first-table></first-table>
    <first-table></first-table>
    <first-table></first-table>
    <first-table></first-table>
    <first-table></first-table>
    <first-table></first-table>
    <first-table></first-table>
</div>


<template id="helloTem">
    <div>
        <h3>？？？</h3>
        <table>
            <tr v-for="(user1,index) in userList1" v-if="index>=0&&index<5">
                <td v-text="user1.name"></td>
            </tr>
        </table>

    </div>
</template>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<script>
    axios.defaults.baseURL = `http://127.0.0.1:8090`
    Vue.component(`firstTable`, {
        data() {
            return {
                userList1: [],
                url: `/VueAxios/user`
            }
        },
        template: `#helloTem`,
        methods: {
            async getUserList() {
                let {data: value} = await axios.get(`${this.url}`)
                this.userList1 = value
            }
        },
        mounted() {
            this.getUserList()
        }

    })


    const APP = new Vue({
        el: `#app`,
        data: {},
        methods: {}
    })
</script>
</body>
</html>
